<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>我的个人博客</title>
  <style>
    /* 基础样式重置 */
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      font-family: 'Arial', '微软雅黑', sans-serif;
      background-color: #f8f9fa;
      color: #333;
      line-height: 1.6;
    }

    /* 导航栏样式 */
    .header {
      background-color: #333;
      padding: 15px 0;
    }

    .header nav {
      width: 90%;
      max-width: 1200px;
      margin: 0 auto;
    }

    .header ul {
      list-style: none;
      display: flex;
      gap: 20px;
    }

    .header a {
      color: white;
      text-decoration: none;
      padding: 8px 12px;
      border-radius: 4px;
      transition: background-color 0.3s;
    }

    .header a:hover {
      background-color: #555;
    }

    .header a.active {
      background-color: #007bff;
    }

    /* 文章列表样式 */
    .article-list {
      padding: 40px 0;
    }

    .container {
      width: 90%;
      max-width: 1200px;
      margin: 0 auto;
    }

    .section-title {
      text-align: center;
      font-size: 28px;
      margin-bottom: 30px;
      color: #222;
      border-bottom: 2px solid #007bff;
      display: inline-block;
      padding-bottom: 8px;
    }

    .article-card {
      background-color: #fff;
      padding: 25px;
      margin-bottom: 25px;
      border-radius: 8px;
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
      transition: transform 0.3s ease, box-shadow 0.3s ease;
    }

    .article-card:hover {
      transform: translateY(-3px);
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    }

    .article-title a {
      color: #007bff;
      text-decoration: none;
      font-size: 20px;
      font-weight: bold;
    }

    .article-title a:hover {
      text-decoration: underline;
    }

    .article-meta {
      margin: 10px 0;
      font-size: 14px;
      color: #777;
      display: flex;
      flex-wrap: wrap;
      gap: 15px;
    }

    .article-excerpt {
      font-size: 15px;
      color: #555;
      margin: 10px 0 15px;
    }

    .read-more {
      display: inline-block;
      color: #007bff;
      text-decoration: none;
      font-weight: bold;
    }

    .read-more:hover {
      text-decoration: underline;
    }

    /* 底部版权样式 */
    .footer {
      background-color: #333;
      color: #bbb;
      text-align: center;
      padding: 30px 0;
      margin-top: 40px;
      font-size: 14px;
    }

    .footer a {
      color: #007bff;
      text-decoration: none;
    }

    .footer a:hover {
      text-decoration: underline;
    }
  </style>
</head>

<body>
  <!-- 头部导航 -->
  <header class="header">
    <nav>
      <ul>
        <li><a href="/" class="active">首页</a></li>
        <li><a href="/article">文章</a></li>
        <li><a href="/about">关于我</a></li>
      </ul>
    </nav>
  </header>

  <!-- 文章列表 -->
  <section class="article-list">
    <div class="container">
      <h2 class="section-title">最新文章</h2>

      <div class="article-card">
        <h3 class="article-title"><a href="#">HTML基础：从零开始搭建网页结构</a></h3>
        <div class="article-meta">
          <span>发布时间：2024-05-10</span>
          <span>分类：前端开发</span>
          <span>阅读：128</span>
        </div>
        <p class="article-excerpt">
          HTML作为网页的骨架，是前端开发的基础。本文将从DOCTYPE声明、标签结构、语义化元素等方面，带你快速掌握HTML的核心用法，帮助你搭建规范的网页结构...
        </p>
        <a href="#" class="read-more">阅读全文 →</a>
      </div>

      <div class="article-card">
        <h3 class="article-title"><a href="#">CSS Flex布局：轻松实现响应式排版</a></h3>
        <div class="article-meta">
          <span>发布时间：2024-05-05</span>
          <span>分类：前端开发</span>
          <span>阅读：96</span>
        </div>
        <p class="article-excerpt">
          Flex布局是CSS中常用的布局方式，尤其适合响应式设计。本文将通过实例讲解Flex容器与项目的属性，教你如何用几行代码实现水平居中、垂直居中、自适应排列等效果...
        </p>
        <a href="#" class="read-more">阅读全文 →</a>
      </div>

      <div class="article-card">
        <h3 class="article-title"><a href="#">个人博客搭建心得：从设计到上线</a></h3>
        <div class="article-meta">
          <span>发布时间：2024-04-28</span>
          <span>分类：经验分享</span>
          <span>阅读：156</span>
        </div>
        <p class="article-excerpt">
          搭建个人博客不仅能记录学习过程，还能提升技术能力。本文将分享我从需求分析、界面设计、代码实现到最终上线的完整流程，包含遇到的问题与解决方案...
        </p>
        <a href="#" class="read-more">阅读全文 →</a>
      </div>
    </div>
  </section>

  <!-- 底部版权 -->
  <footer class="footer">
    <p>© 2025 我的个人博客 | 由 <a href="#">Tcdawang</a> & <a href="#">Zimo</a> 共同开发</p>
    <p>本站内容遵循 <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/deed.zh">CC BY-NC-SA 4.0 协议</a></p>
  </footer>
</body>

</html>
